<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/leader/notices'}">学院领导</el-breadcrumb-item>
      <el-breadcrumb-item>审核请求处理</el-breadcrumb-item>
      <el-breadcrumb-item>任务书审核</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <!--表格区域-->
      <el-table :data="checkedAssignmentList" stripe style="width:1080px;margin:10px 10px">
        <el-table-column align="center" label="序号" width="80" type="index"></el-table-column>
        <el-table-column align="center" label="课题名称" width="280" >
          <template slot-scope="scope">
            <el-link type="primary" @click="showSubjectDetail(scope.row.sub)">{{scope.row.sub.name}}</el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题类型" width="120">
          <template slot-scope="scope">
            <el-tag>{{scope.row.sub.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源" width="120" >
          <template slot-scope="scope">
            <el-tag type="info">{{scope.row.sub.source.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="指导老师" width="120" >
          <template slot-scope="scope">
            <el-tag>{{scope.row.tea.name}} ({{scope.row.tea.id}})</el-tag>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="发布时间" width="180" >
          <template slot-scope="scope">
            <span>{{$moment(scope.row.assignment.updateTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="审核意见/详情/撤销" width="180">
          <template slot-scope="scope">
            <el-popover placement="top" width="250px" trigger="click" :content="scope.row.assignment.checkAdvice" style="margin-left:20px">
              <el-button slot="reference" type="success" circle icon="el-icon-check"></el-button>
            </el-popover> 
            <el-button style="margin-left:10px" type="primary" @click="viewCheckedAssignment(scope.row.assignment)" circle icon="el-icon-view"></el-button> 
            <el-button style="margin-left:10px" type="danger" @click="cancelCheckedAssignment(scope.row.assignment.id)" circle icon="el-icon-delete"></el-button> 
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination
        background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage" 
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination> 

    <!-- 课题详情对话框 -->
    <el-dialog title="课题详情" :visible.sync="subjectDialogVisible">
      <el-form label-width="80px" >
        <el-form-item label="课题名称">
          <el-input :value="subjectDetail.name" readonly ></el-input>
        </el-form-item>
        <el-form-item label="课题类型">
          <el-input :value="subjectDetail.type.label" readonly ></el-input>
        </el-form-item>
        <el-form-item label="课题来源">
          <el-input :value="subjectDetail.source.label" readonly ></el-input>
        </el-form-item> 
        <el-form-item label="课题简介">
          <el-input :value="subjectDetail.introduce" readonly type="textarea" :rows="6"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="任务书详情" :visible.sync="assignmentDialogVisible">
      <el-form label-width="200px">  
        <el-form-item label="研究的主要内容 : " >
          <el-input class="input" :value="viewAssignment.research" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="涉及的知识和基本要求 : " >
          <el-input class="input" :value="viewAssignment.command" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="本课题预期目标 : " >
          <el-input class="input" :value="viewAssignment.goal" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="本课题进度安排 : ">
          <el-input class="input" :value="viewAssignment.scheduling" readonly type="textarea" :rows="5"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {getLeaderCheckedAssignmentByPage, leaderCancelCheckedAssignmentById, getLeaderCheckedAssignmentTotal} from '../../axios/assignment'
  export default {
    name: 'LeaderCheckedAssignment',
    data(){
      return {
        pageParam:{ currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1, // 所有可选的课题列表的总数   
        subjectDialogVisible: false, // 控制课题详情对话框的 显示/隐藏
        assignmentDialogVisible: false, // 控制任务书详情对话框的 显示/隐藏
        formRules: {
          status: [ { required: true, message: '请选择审核结果', trigger: 'change' } ],
          checkAdvice: [ { required: true, message: '请输入审核意见', trigger: 'blur' } ]
        },
        subjectDetail:{
          type:{}, source:{}
        },
        viewAssignment: {},
        checkParams:{
          id: 0,
          status: 3,
          checkAdvice: ''
        },
        checkedAssignmentList: [], // 需要审核的课题列表
      }
    },
    created(){
      this.getCheckedAssinmentList()
      this.getCheckedAssinmentTotal() 
    },
    methods: {
      getCheckedAssinmentTotal(){
        getLeaderCheckedAssignmentTotal().then(res => {
          if(res.success){
            this.total = res.data
          }
        }) 
      },
      // 获取需要审核的课题列表
      getCheckedAssinmentList(){
        // 向后端发送请求，获取需要审核的课题列表
        getLeaderCheckedAssignmentByPage(this.pageParam).then(res => {
          if(res.success){
            this.checkedAssignmentList = res.data
          } 
        })  
      },
      // 展示 审核申报课题对话框 
      viewCheckedAssignment(assignment){
        this.viewAssignment = assignment  
        this.assignmentDialogVisible = true
      }, 
      showSubjectDetail(subject){
        this.subjectDetail = subject
        this.subjectDialogVisible = true
      },
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getCheckAssinmentList()  
      },
      cancelCheckedAssignment(id){
        this.$confirm('确认撤销吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => { 
          leaderCancelCheckedAssignmentById(id).then(res => {
            if(res.success){
              this.$message.success('撤销成功!') 
              this.pageParam.currentPage = 1
              this.getCheckedAssinmentTotal()
              this.getCheckedAssinmentList() 
            } 
          }) 
        }).catch(() => {
          this.$message.success('已取消提交!')
        })
      }, 
    }
  }
</script>

<style scoped>
  .el-form-item .el-input{
    width: 80%;
  }
  .el-form-item .el-textarea{
    width: 80%;
  }
</style>